<template>
    <a-table bordered :data-source="dataSource" :columns="columns">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
            <a-space>
          <a-popconfirm
            v-if="dataSource.length"
            title="是否删除?"
            @confirm="onDelete(record.id)"
            cancelText="取消"
            okText="确定"
          >
            <a-button type="primary" danger>删除</a-button>
          </a-popconfirm>
          <a-button type="primary" @click="update(record)">更新</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </template>
  <script lang="ts" setup>
  import {  ref,onMounted } from 'vue';
  import axios from 'axios';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';

  interface DataItem {
    id: string;
    username: string;
    age: number;
    sex: string;
  }
  
  const columns = [
    {
      title: '姓名',
      dataIndex: 'username',
      width: '30%',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '操作',
      dataIndex: 'operation',
    }
  ];
  //数据源
  let dataSource = ref<DataItem[]>([]);
  
  const show=()=>{
      //获取数据
    axios({
        url: '/api/show',                                                                                                        
        method: 'get',
        params: {
            current: 1,
            size: 2,
            name:''
        }
    }).then(res => {
        console.log(res.data);
        dataSource.value = res.data.data.list;
    });
    /* axios({
        url: '/api/show1',                                                                                                        
        method: 'get'
    }).then(res => {
        console.log(res.data);
        dataSource.value = res.data.data.list;
    }); */
  }

  onMounted(() => {
    show();
  })

  const onDelete = (id: number) => {
      axios.delete(`/api/delete/${id}`).then(() => {
          message.info('删除成功');
          show();
      })
  }

  const router = useRouter();
  const update = (record: DataItem) => {
      router.push({
          path: '/update',
          state:{
            params: JSON.stringify(record)
          }
      })
  }
  </script>
  <style  scoped>
  .editable-cell {
    position: relative;
    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }
  
    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }
  
    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }
  
    .editable-cell-icon {
      margin-top: 4px;
      display: none;
    }
  
    .editable-cell-icon-check {
      line-height: 28px;
    }
  
    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }
  
    .editable-add-btn {
      margin-bottom: 8px;
    }
  }
  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }
  </style>
  